<template>
      <div class="card">
          <el-row style="margin-top: 10px" :gutter="10" justify="start">
              <el-col :span="4">
                  <label style="height:32px;margin-left: 10px" id="qsid">骑手id:</label>
                  <el-input style="width: 120px" name="qsid" v-model="qishou.qsid" placeholder="请输入骑手id"></el-input>
              </el-col>
              <el-col :span="4">
                  <label id="yhid">用户id:</label>
                  <el-input style="width: 120px" name="yhid" v-model="qishou.yhid" placeholder="请输入用户id"></el-input>
              </el-col>
              <el-col :span="4">
                  <label id="qsmz">骑手名:</label>
                  <el-input style="width: 120px" name="qsmz" v-model="qishou.qsmz" placeholder="请输入骑手名称"></el-input>
              </el-col>
              <el-col :span="2">
                  <el-button type="info" @click="doList">查询</el-button>
              </el-col>
              <el-col :span="2">
                  <el-button type="primary" @click="reset">重置</el-button>
              </el-col>
              <el-col :span="2">
                  <el-button type="warning" style="color: black;font-size: 12px;position: absolute;right: 100px; " @click="showAddDialog">+添加骑手</el-button>
              </el-col>
          </el-row>
          <el-row justify="start">
              <el-table stripe
                        :data="qishouList"
                        style="width: 95%;margin-left: 2%;margin-top: 20px "
                        header-row-style="color:black"
                        @sort-change="handleSortChange"
              >
                  <el-table-column prop="qsid" sortable="custom" label="骑手id"></el-table-column>
                  <el-table-column prop="yhid" sortable="custom" label="用户id"></el-table-column>
                  <el-table-column prop="qsmz" label="骑手名称"></el-table-column>
                  <el-table-column align="center" label="操作">
                      <template #default="scope">
                          <el-button type="info" size="small" @click="showDetailPage(scope.row)">详情</el-button>
                          <el-button type="primary" size="small" @click="showUpdateDialog(scope.row)">修改</el-button>
                          <el-button type="danger" size="small" @click="doDelete(scope.row)">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </el-row>

          <el-row>
              <el-pagination
                  style="margin: 30px auto"
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[5,10]"
                  :size="size"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
          </el-row>
      </div>


      <!-- 新增 dialog-->
      <el-dialog v-model="addDialogVisible" title="新增骑手" width="40%" top="2vh" destroy-on-close>
          <add-page
                  @flushPage="doFlushPage"
                  @closeDialog="addDialogVisible = false">
          </add-page>
      </el-dialog>

      <!-- 更新 dialog-->
      <el-dialog v-model="updateDialogVisible" title="更新骑手信息" width="40%" top="2vh" destroy-on-close>
          <update-page ref="updatePageRef"
                       @flushPage="doFlushPage"
                       @closeDialog="updateDialogVisible = false">
          </update-page>
      </el-dialog>

      <!-- 详情 页面 -->
      <detail-page ref="detailPageRef"></detail-page>
</template>

<script setup lang="ts">
import {nextTick, onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage, FormInstance} from "element-plus";
import AddPage from './AddQishou.vue'
import UpdatePage from './UpdateQishou.vue'
import DetailPage from './DetailQishou.vue'

const qishou = ref({
    qsid: '',
    yhid: '',
    qsmz: ''
})
const qishouList = ref([])
const formRef = ref<FormInstance>();

onMounted(() =>{
    doList();
})

const doList = async () => {
    qishouList.value = [];
    const {data} = await axios.get('/api/qishou',{
        params: {
            ...qishou.value,
            currentPage: currentPage.value,
            pageSize: pageSize.value,
            sortField: sortField.value, // 传递排序字段
            sortOrder: sortOrder.value, // 传递排序顺序
        }
    })
    if(data.code === 200){
        qishouList.value = data.data.records;
        total.value = data.data.total;
        ElMessage.success(data.message);
    }else{
        ElMessage.error(data.message);
    }
}
const reset = () => {
    qishou.value = {
        qsid: '',
        yhid: '',
        qsmz: ''
    }
    doList();
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const doFlushPage = ()=>{
    resetForm(formRef.value);
    doList();
}

// 新增 dialog
const addDialogVisible = ref(false);
const showAddDialog = ()=>{
    addDialogVisible.value = true;
}

// 更新 dialog
const updateDialogVisible = ref(false);
const updatePageRef = ref(); // 组件引用
const showUpdateDialog = (obj)=>{
    updateDialogVisible.value = true;
    nextTick(()=>{
        updatePageRef.value.handleUpdateData(obj);
    })
}

// 详显 dialog
const detailPageRef = ref();
const showDetailPage = (obj)=>{
    detailPageRef.value.handleDetailData(obj);
}

//删除
const doDelete = async (obj) => {
    const {data} = await axios.delete('/api/qishou/'+obj.qsid,)
    if(data.code === 200){
        ElMessage.success(data.message);
        await doList();
    }else{
        ElMessage.error(data.message);
    }
}

const currentPage = ref(1);
const pageSize = ref(5);
const size = ref<'small' | 'default'>('default');
const total = ref(0);
const disabled = ref(false);
const background = ref(true);

const handleSizeChange = (val: number) => {
    pageSize.value = val;
    doList();
}

const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    doList();
}

//排序
const sortField = ref('');
const sortOrder = ref('');

const handleSortChange = (sort: { prop: string; order: 'ascending' | 'descending' | null }) => {
    if (sort.prop && sort.order) {
        sortField.value = sort.prop;
        // 将 Element Plus 的排序顺序转换为后端能识别的格式
        sortOrder.value = sort.order === 'ascending' ? 'asc' : 'desc';
    } else {
        sortField.value = '';
        sortOrder.value = '';
    }
    doList(); // 重新请求数据
}


</script>

<style scoped>
.card{
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0, .12);
}
</style>